// pages/order/order.js
import { fetch } from '../../utils/fetch'
import { getTotalPrice, crytoPhone, getCurrentPage } from '../../utils/index'
import Dialog from '@vant/weapp/dialog/dialog';
import { requestPayment } from '../../utils/api'
/**
 * vue => event-bus
 * react => 发布订阅模式
 * 
 * order页面底部组件使用了定位，如果要使用弹出框的话，需要做一个额外的判断，隐藏这个地步的总价组件
 */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    totalText: "提交订单",
    totalPrice: 0,
    orderList: [],
    address: '',
    parentShow: false,
    postion: "bottom",
    height: '85%',
    addressList: [],
    selectedAddressItem: {},
    routerPath: '' // 获取当前页面的路径
  },
  // 打开弹出框-地址选择按钮函数-调用上拉弹出框
  selectAddress() {
    console.log('selectAddress')
    this.setData({ parentShow: true })
    // 弹出框出现的时候，调用地址列表接口
    this.asyncGetAddressList()
  },
  // 关闭弹出框
  closePopup() {
    this.setData({ parentShow: false })
  },
  // 调用地址列表接口
  async asyncGetAddressList() {
    const response = await fetch('addressList')
    response.data.forEach(item => {
      if (item.phone) {
        item.phone = crytoPhone(item.phone)
      }
    })
    console.log('response:', response)
    this.setData({ addressList: response.data })
  },
  // 切换地址
  handleChangeAddress(e) {
    console.log('e:', e)
    const selectedAddressItem = this.data.addressList.find(v => v._id === e.detail)
    // 选中地址，关闭弹出框
    this.setData({ parentShow: false, selectedAddressItem })
    // 将地址渲染在order页面
  },

  // 点击新增地址按钮
  handleRouterAddress() {
    wx.navigateTo({
      url: '/pages/address/address',
    })
  },
  addressMessage(e) {
    console.log('地址:', e.detail.address)
    this.setData({ address: e.detail.address })
  },
  /**
 * 1.  点击提交订单，判断是否已经选择了地址
 */
  async onSubmit() {
    // 获取一下，addressCard组件传递过来的这个地址是否为空，如果为空，则提示用户去选择地址
    // console.log('1111onClick')
    // [] = [] {} = {} 如果想要比较，对内部的某个值做比较
    // 对象是引用地址传递值，引用类型不能直接做比较
    // console.log('this.data.selectedAddressItem', this.data.selectedAddressItem)
    if (!this.data.selectedAddressItem.address) {
      Dialog.alert({
        title: '温馨提示',
        message: '请选择地址再提交',
      })
    } else {
      // 提交订单-跳转到支付页面-支付成功之后，跳转到订单页面
      // 小程序代码-支付接口调用
      const res = await fetch('do-pay', {})
      console.log('res:', res)
      if (res.returnCode === 'FAIL') {
        wx.showToast({
          icon: "error",
          title: '支付失败请重新尝试',
        })
        return;
      }
      const payment = res.result.payment
      const payRes = await requestPayment(payment)
      console.log('paYRes', payRes)
    }
  },

  /**
   * 在订单页面需要请求购物车中的数据，
   * 
   */
  async fetchCartList({ page = 1, size = 5 }) {
    const response = await fetch('goodsList', { page, size })
    // console.log('response-order', response)
    const list = response.data.filter(v => v.isCart)
    list.forEach(item => {
      item.price = item.price.toFixed(2)
      item.allPrice = (item.price * item.number).toFixed(2)
    })
    console.log('list', list)
    this.setData({
      orderList: list,
      totalPrice: getTotalPrice(list)
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad({ totalPrice }) {
    this.setData({
      totalPrice
    })
    this.fetchCartList({})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({ routerPath: getCurrentPage() })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})